<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-loading="treeLoading" title="会议地点" name="1">
        <el-tree :data="tagsTreeData" :props="TagProps" node-key="id" :expand-on-click-node="false">
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => append(data)">增加</el-button>
              <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
            </span>
          </span>
        </el-tree>
      </el-collapse-item>
    </el-collapse>
    <el-dialog v-if="dialogTagForm" :title="dialogTitle" :visible.sync="dialogTagForm">
      <el-form ref="refForm" v-model="tagEditForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="tagEditForm.name" maxlength="20" show-word-limit />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="tagEditForm.description"
            type="textarea"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(tagEditForm)">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getChildrenTags,
  postTags
} from '@/api/zzxt/party-conference/confer-tags'
export default {
  name: 'ConferInfo',
  data: () => ({
    tagEditForm: {},
    treeLoading: false,
    dialogTagForm: false,
    dialogTitle: '',
    activeNames: ['1'],
    TagProps: { label: 'name' },
    TagsLoading: false,
    tagsTreeData: [],
    id: 1
  }),
  computed: {
    company() {
      return this.$store.state.user.globalCompany
    }
  },
  watch: {
    currentCompany: {
      handler(val) {
        if (val) this.loadNode()
      },
      immediate: true
    }
  },
  mounted() {
    this.loadNode()
  },
  methods: {
    loadNode() {
      getChildrenTags({ appName: 'zzxt', loadAll: true }).then(data => {
        this.tagsTreeData = this.NodeRecurve(data.list)
      })
    },
    NodeRecurve(node) {
      const re = []
      getChildrenTags({ appName: 'zzxt', id: node.id }).then(data => {
        if (data.list.length < 1) return Object.assign(node, { leaf: true })
        else {
          this.re = data.list.map(element => {
            return this.NodeRecurve(element)
          })
        }
      })
      return Object.assign({ children: re }, node)
    },
    submitForm(formData) {
      this.treeLoading = true
      postTags(formData)
        .then(data => {
          this.$message.successs('提交成功')
        })
        .finally((this.treeLoading = false))
    },
    append(data) {
      this.tagEditForm = {
        parentId: data.id,
        appName: 'zzxt',
        createCompany: this.company
      }
      this.dialogTagForm = true
      this.dialogTitle = '添加标签'
    },

    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    }
  }
}
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
